<template>
	<view>
		<scroll-view scroll-x="true" class="scroll-X">
			<view class="sjs">
				<view class="item" v-for="(item, index) in sjs" :key="index" :class="{active: item.active}">
					<image :src="item.sjavatar"></image>
				</view>
			</view>
		</scroll-view>
		<view class="tabbar flex-btw">
			<view class="topsegment2">
				<u-subsection :list="items" :current="current" @change="onClickItem" mode="tabs" active-color="#000"></u-subsection>
			</view>
			<view class="selector" v-show="current==0">
				<picker @change="bindPickerChange" :range="dList" ref="dPicker">
				  <view class="picker-input">
				    <text class="value" style="margin-right: 5px;">{{currentD}}</text>
						<u-icon name="arrow-down" color="#7d7d7d" size="24"></u-icon>
				  </view>
				</picker>
			</view>
		</view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" v-if="current==0">
			<view class="orderList">
				<view class="no-result" v-if="!list.length">
					<u-empty text="暂无订单" mode="order"></u-empty>
				</view>
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="header">
						<view class="logo flex-center-around">
							<image src="../../static/imgs/yueke/ykjl_t@2x.png" class="tuan" v-if="item.type==1"></image>
							<image src="../../static/imgs/yueke/ykjl_s@2x.png" v-if="item.type==2"></image>
						</view>
						<view class="date">
							<text>{{item.yydate}} 预约</text>
						</view>
						<button class="cancelBtn" type="default">取消预约</button>
						<view class="qrcode" v-if="item.type==2" @click="showQrcode(item)">
							<image src="../../static/imgs/yueke/qr.png" mode=""></image>
						</view>
					</view>
					<view class="body flex-btw" v-if="item.type==1">
						<view class="left">
							<view class="avatar">
								<image :src="item.avatar"></image>
							</view>
							<view class="title">
								<text>{{item.title}}</text>
								<text class="sub">{{item.subtitle}}</text>
							</view>
						</view>
						<view class="right">
							<view class="qrcode" @click="showQrcode(item)">
								<image src="../../static/imgs/yueke/qr.png" mode=""></image>
							</view>
							<view class="range">
								{{item.range}}
							</view>
							<view class="date">
								{{item.date}} {{$global.getDay(item.date)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" v-if="current==1">
			<view class="infobar flex-btw">
				<view class="monthPicker" @click="showMonthPicker=true">
					{{searchMonth ? (searchMonth.year + '/' + searchMonth.month) : '本月'}}
					 <u-icon class="icon" name="arrow-down-fill" color="#7d7d7d" size="24"></u-icon>
				</view>
				<u-picker :show="showMonthPicker" mode="time" @close="showMonthPicker = false;" :params="monthPickerParams" start-year="2019" :end-year="$global.currentYear" @confirm="monthConfirm"></u-picker>
				<view class="infos">团课18节/私教0节</view>
			</view>
			<view class="orderList">
				<view class="no-result" v-if="!historylist.length">
					<u-empty text="无订单" mode="order"></u-empty>
				</view>
				<view class="item" :class="'used'+item.type" v-for="(item, index) in historylist" :key="index">
					<view class="header">
						<view class="logo flex-center-around">
							<image src="../../static/imgs/yueke/ykjl_t@2x.png" class="tuan" v-if="item.type==1"></image>
							<image src="../../static/imgs/yueke/ykjl_s@2x.png" v-if="item.type==2"></image>
						</view>
						<view class="date">
							<text>{{item.yydate}} 预约</text>
						</view>
						<button class="cancelBtn hidden" type="default"></button>
					</view>
					<view class="used" v-if="item.type==1"></view>
					<view class="body flex-btw" v-if="item.type==1">
						<view class="left">
							<view class="avatar">
								<image :src="item.avatar"></image>
							</view>
							<view class="title">
								<text>{{item.title}}</text>
								<text class="sub">{{item.subtitle}}</text>
							</view>
						</view>
						<view class="right">
							<view class="qrcode hidden">
							</view>
							<view class="range">
								{{item.range}}
							</view>
							<view class="date">
								{{item.date}} {{$global.getDay(item.date)}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="qrcodepopup" type="center" @change="handlerPopupStatusChenge">
			<view id="qrcodepopup">
				<view class="qrcode" v-if="qrcodeValue">
					<!-- <canvas id="qrcode"/> -->
					<image :src="qrcodeValue" mode=""></image>
				</view>
				<view class="tip">
					<image src="../../static/imgs/yueke/ykjl_sx@2x.png" mode="" @click="refreshQrcode"></image>
					<text>向商家展示此二维码</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Qr from "@/common/wxqrcode.js"
	var img1 = require('../../static/test/a5.jpg');
	var img2 = require('../../static/test/a4.jpg');
	!img1.startsWith('/') && (img1 = '/' + img1);
	!img2.startsWith('/') && (img2 = '/' + img2);
	export default {
		data() {
			return {
				current: 0,
				currentD: '宿迁店',
				qrcodeValue: '',
				dList: ['宿迁店', '江阴店'],
				items: ['待验证', '历史记录'],
				sjs: [
					{sjavatar: img2, active: true},
					{sjavatar: img1, active: false},
					{sjavatar: img1, active: false},
					{sjavatar: img1, active: false}
				],
				list: [
					{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'},
					{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'},
					{type: 2, yydate: '2020-01-23 09:15', avatar: img2, title: '', subtitle: '', range: '', date: ''},
				],
				historylist: [
					{type: 2, yydate: '2020-01-23 09:15', avatar: img2, title: '', subtitle: '', range: '', date: ''},
					{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'},{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'},{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'},
					{type: 1, yydate: '2020-01-23 09:15', avatar: img1, title: '小思绪课堂', subtitle: 'LiLi老师', range: '10:30-12:00', date: '2020-01-24'}
				],
				showQrcodepopup: false,
				showMonthPicker: false,
				searchMonth: '',
				monthPickerParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				}
			}
		},
		onBackPress() {
			if (this.showQrcodepopup) {
				this.$refs['qrcodepopup'].close();
				return true;
			}
			if (this.showMonthPicker) {
				this.showMonthPicker = false;
				return true;
			}
		},
		methods: {
			onClickItem: function(e) {
				if (this.current !== e) {
					this.current = e;
				}
			},
			bindPickerChange: function(e) {
				this.currentD = this.dList[e.detail.value];
			},
			showQrcode: function (item) {
				this.$refs['qrcodepopup'].open();
				this.qrcodeValue = Qr.createQrCodeImg(item.type);
			},
			refreshQrcode: function () {
				// TODO
				this.qrcodeValue = Qr.createQrCodeImg();
			},
			handlerPopupStatusChenge: function(e) {
				this.showQrcodepopup = e.show;
				if (!e.show) {
					this.qrcodeValue = '';
				}
			},
			monthConfirm: function (data) {
				this.searchMonth = data;
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-X {
		margin: 0 10pt;
		border-bottom: 1px solid #CFCFCF;
		width: calc(100vw - 20pt);
	}
	.scroll-Y {
		background: #f5f5f5;
		height: calc(100vh - 98px);
		// #ifdef H5
		height: calc(100vh - 44px - 98px);
		// #endif
	}
	.sjs {
		height: 49px;
		display: flex;
		align-items: flex-end;
		padding-bottom: 10px;
		.item {
			max-height: 40px;
			max-width: 40px;
			min-height: 40px;
			min-width: 40px;
			height: 40px;
			width: 40px;
			margin-right: 8px;
			&.active {
				max-height: 48px;
				max-width: 48px;
				min-height: 48px;
				min-width: 48px;
				height: 48px;
				width: 48px;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.tabbar {
		.topsegment2 {
			width: 280rpx;
		}
		.selector {
			width: 30%;
			text-align: right;
			color: #7d7d7d;
			font-size: 12px;
			padding-right: 10pt;
		}
	}
	.orderList {
		.hidden {
			visibility: hidden;
		}
		.item {
			background: #fff;
			width: calc(100% - 20pt);
			margin: 10pt;
			border-radius: 10px;
			position: relative;
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5px;
				.logo {
					width: 32px;
					height: 32px;
					margin-right: 10px;
					image {
						width: 100%;
						height: 100%;
						&.tuan {
							width: 18px;
							height: 18px;
						}
					}
				}
				.date {
					position: relative;
					color: #a7a7a7;
					font-size: 12px;
					text-indent: 16px;
					&::before {
						content: '';
						position: absolute;
						left: 0;
						width: 12px;
						height: 12px;
						background: url(../../static/imgs/yueke/ykjl_sj@2x.png);
						background-size: 100%;
						top: 4px;
					}
				}
				.cancelBtn {
					background: transparent;
					height: 26px;
					line-height: 26px;
					font-size: 12px;
					width: 80px;
					margin-right: 10px;
				}
			}
			.qrcode {
				width: 24px;
				height: 24px;
				margin-right: 10px;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.body {
				padding: 10px 0 10px;
				border-top: 1px solid #cecece;
				margin: 0 15px;
				.left {
					display: flex;
					flex-grow: 1;
					.avatar {
						width: 70px;
						height: 70px;
						image {
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
					.title {
						margin: 0 10px;
						font-size: 15px;
						font-weight: bold;
						.sub {
							font-size: 13px;
							font-weight: normal;
							display: block;
							color: #b7b7b7;
						}
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					justify-content: space-between;
					.qrcode {
						margin-right: 0px;
					}
					.date {
						background-color: #959595;
						color: #fff;
						font-size: 12px;
						padding: 0 10px;
						text-align: right;
					}
				}
			}
			&.used1::after {
				content: '';
				background: url(../../static/imgs/yueke/ykjl_ysy@2x.png);
				width: 100px;
				height: 100px;
				position: absolute;
				background-size: 100%;
				top: -10px;
				right: 10px;
			}
			&.used2::after {
				content: '';
				background: url(../../static/imgs/yueke/ykjl_ysy@2x.png);
				background-size: 100%;
				width: 40px;
				height: 40px;
				position: absolute;
				right: 8px;
				top: 2px;
			}
		}
	}
#qrcodepopup {
	background: #fff;
	width: 240px;
	border-radius: 10px;
	height: 300px;
	position: absolute;
	left: calc(50% - 120px);
	top: calc(50% - 150px);
	.qrcode {
		width: 170px;
		height: 170px;
		margin: 30px auto 20px;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tip {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		text {
			padding: 5px 0;
		}
		image {
			width: 16px;
			height: 16px;
		}
	}
}
	.myqrcode {
		width: 200px;
		height: 200px;
		border: 1px solid;
	}
	.infobar {
		height: 30px;
	  padding: 0 15pt;
		align-items: center;
		position: sticky;
		top: 0px;
		background: #F5F5F5;
		z-index: 1;
		.monthPicker {
			position: relative;
			background: #fff;
			padding: 0 15pt 0 10pt;
			border-radius: 50px;
			font-size: 13px;
			height: 20px;
			line-height: 20px;
			.icon {
				position: absolute;
				right: 6px;
				top: 1px;
			}
		}
		.infos {
			font-size: 12px;
			color: #A2A2A2;
		}
	}
</style>